MATH FOR LB

Locating things on the screen can be done the slow way: "hard-coding" the X and Y coordinates, or the quicker way: using math to calculate them as variables. This method might be useful for multiple controls, boxes, text lines, or windows, and, of course, plotting. I will describe how I do it with math, hoping this will be of interest to programmers who are rusty on their analytic geometry or younger ones who haven't yet discovered it.

The key is to translate your requirements into linear equations. And the step that gets you there is to make a sketch of a straight line graph with some known values. My demo "manyTextboxes.bas" in this newsletter issue used this kind of math to locate 216 "textboxes." I'll get into that later, but first let's do a simple example of placing text.

There are some conventions for graphing: what you are looking for is represented on a vertical axis, and what you already know is shown on a horizontal axis. These are customarily called the Y-axis and the X-axis, but they can be named for any variable, as you will see in my examples. The equation form I prefer for the graph is:

	y=(y2-y1)/(x2-x1)*(x-x1)+y1

where y is the value you're solving for, x is the corresponding value, and y1, x1, y2, and x2 are known paired values for any two other points on the line.

Say you want to place nine lines of text in a linear fashion. In order to locate the text where you want it, you'll need a graphics window or graphicbox. Let the window be 640 x 480 pixels, with the lines distributed uniformly but slanting across the window. Let the first text line start at 100, 40, the second at 130, 80 and so on. The graph sketch will look like:

and the equations will be:

	xPos=(130-100)/(2-1)*(nLine-1)+100

or simplified, xPos=30*(nLine-1)+100

	yPos=(80-40)/(2-1)*(nLine-1)+40

or simplified, yPos=40*(nLine-1)+40

The LB code is:

  nomainwin  '*** (j is the line number)
WindowWidth=640 : WindowHeight=480
open "" for graphics as #w1
  #w1, "trapclose [quit]"
  #w1, "down"
  for j=1 to 9
    t$(j)="text "+str$(j)  '*** define text
    xPos=30*(j-1)+100
    yPos=40*(j-1)+40
    #w1, "place ";xPos;" ";yPos;
    #w1, "\";t$(j)
  next j
WAIT

[quit]
  close #w1 : END

'----------------- end of code ----------------

In the case of my demo "manyTextboxes.bas" in this newsletter, I wanted to show 72 sets of 3 boxes side by side, but they had to be divided into three groups of 24 rows, top-to-bottom, to fit the screen. That description might not be clear, but if you run the demo, you'll see what I'm trying to say. So I needed 24 Y-locations, which I assigned to an array. yBox(1-24) would be in rows 1-24, but so would yBox(25-48) and yBox(49-72). Here's how the sketch looks:

But the sketch shows three lines, not one! They are obviously similar, though, so we can still relate them in a way that will yield one equation. The equation for the first line (with j as the set number) is:

	row=23/23*(j-1)+1

Since 23/23=1 (and it's true for all three lines), it can be dropped from the equations. Then they appear as:

	row=(j-1)+1  for sets 1-24
	row=(j-25)+1  for sets 25-48
	row=(j-49)+1  for sets 49-72

The subtracted term is the only thing different here, so let's call it v (for variable) and deal with it. If we can make v change values for the three groups of sets, then we will have only one equation:

	row=(j-v)+1

The trick to keeping v the same for a number of sets is to use the INT (integer) function. Look at this:

	v=int((j-1)/24)

For increasing values of j, v will be zero below 25, 1 below 49, and 2 below 73. To transform v from 0, 1, and 2 to 1, 25 and 49, we multiply it by 24 and add 1:

	v=int((j-1)/24)*24+1

Substituting this in the row equation, we have:

	row=j-(int((j-1)/24)*24+1)+1

When the parentheses are removed, the ones at the end cancel out:

	row=j-int((j-1)/24)*24

This is the equation used in my code at [assignBoxCoordinates] in the demo, "manyTextboxes.bas" (I used the variable maxBoxes instead of 24).

Now that we can find the row number for any of the 72 sets, another sketch will give us an equation for the Y-pixel location in the window. I wanted row 1 to be at Y=20 and row 24 (maxBoxes) to be at Y=402. My sketch looked like:

The equation for the sketch is:

	yBox=(402-20)/(24-1)*(row-1)+20

and the same equation looks like this in my code:

	yBox(j)=382/(maxBoxes-1)*(row-1)+20

The next line of code should look familiar.

group=int((j-1)/maxBoxes)+1

It's just like the INT trick we used to get v (remember that maxBoxes=24). Here, group=1 for j=1 to 24, group=2 for j=25 to 48, and group=3 for j=49 to 72.

The following three lines of code find the xBox locations for the three adjacent boxes at a given yBox location. The equations were derived with the methods already covered, so this is a good place to end. A lot of math was crammed into a few lines here so, if you want me to clarify what I've tried to say, eMail me at bbjen@hotPOP.com.

Happy coding, Bill Jennings

---